import { App, Astal, Gtk, Gdk } from "astal/gtk4";
import { Variable, bind } from "astal";
import Wp from "gi://AstalWp";

import { spacing } from "../../variables";
import AppLauncher from "./Components/AppLauncher";
import Workspaces from "./Components/Workspaces";

const time = Variable("").poll(1000, "date");

const Start = () => {
  return (
    <box halign={Gtk.Align.START} spacing={spacing}>
      <AppLauncher />
      <Workspaces />
    </box>
  );
};

const Audio = () => {
  const audio = Wp.get_default()?.audio; // Use optional chaining
  if (!audio) {
    return null; // or return a fallback UI
  }

  return (
    <slider
      widthRequest={100}
      onChangeValue={(self) => audio.default_speaker.set_volume(self.value)}
      value={bind(audio.default_speaker, "volume")}
    />
  );
};

export default function Bar(gdkmonitor: Gdk.Monitor) {
  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;

  return (
    <window
      visible
      cssClasses={["Bar"]}
      gdkmonitor={gdkmonitor}
      exclusivity={Astal.Exclusivity.EXCLUSIVE}
      anchor={TOP | LEFT | RIGHT}
      application={App}
    >
      <centerbox cssName="centerbox">
        <Start />
      </centerbox>
    </window>
  );
}
